<script setup lang="ts">
declare global {
  interface Navigator {
    connection: NetworkInformation
  }

  interface NetworkInformation extends EventTarget {
    effectiveType: string
    downlink: number
    rtt: number
  }
}

import { useSettingStore } from '@/stores'
import { computed, ref, onMounted, onUnmounted } from 'vue'

import { RoomInfo } from '@/services/room/type'

const { roomInfo } = defineProps<{
  roomInfo: RoomInfo
}>()

const settingStore = useSettingStore()

const flag = computed(() => settingStore.settingMeeting.groupStatus)

const handelGroup = () => {
  settingStore.setSettingMeeting('groupStatus', !flag.value)
}

// 获取网络状态的函数
// 通过 navigator.connection 获取有效的网络类型、下行速度和往返时间（rtt）
const getNetStatus = () => {
  // 首先检查是否在线
  if (!navigator.onLine) {
    return {
      effectiveType: '脱机',
      downlink: 0, // 使用数字代表脱机状态
      rtt: 0 // 使用数字代表脱机状态
    }
  }

  // 如果在线，尝试读取 connection 信息
  if (navigator.connection) {
    return {
      effectiveType: navigator.connection.effectiveType,
      downlink: navigator.connection.downlink, // 保持为数字
      rtt: navigator.connection.rtt // 保持为数字
    }
  }

  // 如果 navigator.connection 不可用，返回默认值
  return {
    effectiveType: 'unknown',
    downlink: 0, // 保持为数字
    rtt: 0 // 保持为数字
  }
}

// 在组件挂载时添加事件侦听器，在卸载时移除
onMounted(async () => {
  const openTimer = setInterval(timer, 1000)
  if (navigator.connection) {
    const updateNetStatus = () => {
      netStatus.value = getNetStatus()
    }

    navigator.connection.addEventListener('change', updateNetStatus)

    // 在组件卸载时清除事件监听器
    onUnmounted(() => {
      clearInterval(openTimer)
      navigator.connection.removeEventListener('change', updateNetStatus)
    })
  }
})

const netStatus = ref(getNetStatus())

const time = ref('00:00')
const totalTime = ref(0) // 用于计数的数值变量

const padTime = (value: number): string => {
  return value.toString().padStart(2, '0')
}

const timer = () => {
  totalTime.value++ // 增加秒数
  const minutes = Math.floor(totalTime.value / 60)
  const seconds = totalTime.value % 60
  time.value = padTime(minutes) + ':' + padTime(seconds) // 更新格式化时间字符串
}
</script>

<template>
  <div class="video_status">
    <ul>
      <li class="status_info">
        <el-tooltip class="box-item" effect="light" placement="bottom">
          <template #content>
            房间号： {{ roomInfo?.roomId }}<br />标题： {{ roomInfo?.title
            }}<br />房主： {{ roomInfo?.account }}<br />时间：{{
              roomInfo!.timeMax / 60 / 60
            }}h</template
          >
          <div class="flexDiv">
            <svg
              t="1696431071176"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4040"
              width="16"
              height="16"
            >
              <path
                d="M512 794.026667a44.8 44.8 0 1 1 44.8-44.8A44.8 44.8 0 0 1 512 794.026667z m-40.106667-563.2a40.106667 40.106667 0 0 1 80.213334 0v369.066666a40.106667 40.106667 0 0 1-79.786667 0zM512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z"
                fill="#5E5C5C"
                p-id="4041"
              ></path>
            </svg>
            <span>会议详情</span>
          </div>
        </el-tooltip>
      </li>
      <li class="status_network">
        <el-tooltip class="box-item" effect="light" placement="bottom">
          <template #content>
            网络状态： {{ netStatus.effectiveType }}<br />延迟：
            {{ netStatus.rtt }}ms<br />带宽：
            {{ netStatus.downlink }}Mb/s</template
          >
          <div class="flexDiv">
            <svg
              v-if="netStatus.effectiveType === '4g'"
              t="1699862510858"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1509"
              width="16"
              height="16"
            >
              <path
                d="M200.533333 682.666667H98.133333a34.133333 34.133333 0 0 0-34.133333 34.133333v102.4a34.133333 34.133333 0 0 0 34.133333 34.133333h102.4a34.133333 34.133333 0 0 0 34.133334-34.133333v-102.4a34.133333 34.133333 0 0 0-34.133334-34.133333zM669.866667 341.333333h-102.4a34.133333 34.133333 0 0 0-34.133334 34.133334v443.733333a34.133333 34.133333 0 0 0 34.133334 34.133333h102.4a34.133333 34.133333 0 0 0 34.133333-34.133333V375.466667a34.133333 34.133333 0 0 0-34.133333-34.133334zM435.2 512H332.8a34.133333 34.133333 0 0 0-34.133333 34.133333v273.066667a34.133333 34.133333 0 0 0 34.133333 34.133333h102.4a34.133333 34.133333 0 0 0 34.133333-34.133333v-273.066667a34.133333 34.133333 0 0 0-34.133333-34.133333zM925.866667 170.666667h-102.4a34.133333 34.133333 0 0 0-34.133334 34.133333v614.4a34.133333 34.133333 0 0 0 34.133334 34.133333h102.4a34.133333 34.133333 0 0 0 34.133333-34.133333V204.8a34.133333 34.133333 0 0 0-34.133333-34.133333z"
                fill="#4DDB49"
                p-id="1510"
              ></path>
            </svg>
            <svg
              v-else-if="netStatus.effectiveType === '3g'"
              t="1699863327148"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7756"
              width="16"
              height="16"
            >
              <path
                d="M669.866667 341.333333h-102.4a34.133333 34.133333 0 0 0-34.133334 34.133334v443.733333a34.133333 34.133333 0 0 0 34.133334 34.133333h102.4a34.133333 34.133333 0 0 0 34.133333-34.133333V375.466667a34.133333 34.133333 0 0 0-34.133333-34.133334zM200.533333 682.666667H98.133333a34.133333 34.133333 0 0 0-34.133333 34.133333v102.4a34.133333 34.133333 0 0 0 34.133333 34.133333h102.4a34.133333 34.133333 0 0 0 34.133334-34.133333v-102.4a34.133333 34.133333 0 0 0-34.133334-34.133333zM332.8 512h102.4a34.133333 34.133333 0 0 1 34.133333 34.133333v273.066667a34.133333 34.133333 0 0 1-34.133333 34.133333H332.8a34.133333 34.133333 0 0 1-34.133333-34.133333v-273.066667a34.133333 34.133333 0 0 1 34.133333-34.133333z"
                fill="#4DDB49"
                p-id="7757"
                data-spm-anchor-id="a313x.search_index.0.i38.71913a81ZoJEkQ"
                class="selected"
              ></path>
              <path
                d="M925.866667 170.666667h-102.4a34.133333 34.133333 0 0 0-34.133334 34.133333v614.4a34.133333 34.133333 0 0 0 34.133334 34.133333h102.4a34.133333 34.133333 0 0 0 34.133333-34.133333V204.8a34.133333 34.133333 0 0 0-34.133333-34.133333z"
                fill="#b7f8b5"
                p-id="7758"
                data-spm-anchor-id="a313x.search_index.0.i39.71913a81ZoJEkQ"
                class=""
              ></path>
            </svg>
            <svg
              v-else-if="netStatus.effectiveType === '2g'"
              t="1699863683518"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8467"
              width="16"
              height="16"
            >
              <path
                d="M332.8 512h102.4a34.133333 34.133333 0 0 1 34.133333 34.133333v273.066667a34.133333 34.133333 0 0 1-34.133333 34.133333H332.8a34.133333 34.133333 0 0 1-34.133333-34.133333v-273.066667a34.133333 34.133333 0 0 1 34.133333-34.133333zM98.133333 682.666667h102.4a34.133333 34.133333 0 0 1 34.133334 34.133333v102.4a34.133333 34.133333 0 0 1-34.133334 34.133333H98.133333a34.133333 34.133333 0 0 1-34.133333-34.133333v-102.4a34.133333 34.133333 0 0 1 34.133333-34.133333z"
                fill="#4DDB49"
                p-id="8468"
                data-spm-anchor-id="a313x.search_index.0.i52.71913a81ZoJEkQ"
                class="selected"
              ></path>
              <path
                d="M823.466667 170.666667h102.4a34.133333 34.133333 0 0 1 34.133333 34.133333v614.4a34.133333 34.133333 0 0 1-34.133333 34.133333h-102.4a34.133333 34.133333 0 0 1-34.133334-34.133333V204.8a34.133333 34.133333 0 0 1 34.133334-34.133333zM567.466667 341.333333h102.4a34.133333 34.133333 0 0 1 34.133333 34.133334v443.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-102.4a34.133333 34.133333 0 0 1-34.133334-34.133333V375.466667a34.133333 34.133333 0 0 1 34.133334-34.133334z"
                fill="#b7f8b5"
                p-id="8469"
                data-spm-anchor-id="a313x.search_index.0.i49.71913a81ZoJEkQ"
                class=""
              ></path>
            </svg>
            <svg
              v-else
              t="1699863683518"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8467"
              width="16"
              height="16"
            >
              <path
                d="M332.8 512h102.4a34.133333 34.133333 0 0 1 34.133333 34.133333v273.066667a34.133333 34.133333 0 0 1-34.133333 34.133333H332.8a34.133333 34.133333 0 0 1-34.133333-34.133333v-273.066667a34.133333 34.133333 0 0 1 34.133333-34.133333zM98.133333 682.666667h102.4a34.133333 34.133333 0 0 1 34.133334 34.133333v102.4a34.133333 34.133333 0 0 1-34.133334 34.133333H98.133333a34.133333 34.133333 0 0 1-34.133333-34.133333v-102.4a34.133333 34.133333 0 0 1 34.133333-34.133333z"
                fill="#b7f8b5"
                p-id="8468"
                data-spm-anchor-id="a313x.search_index.0.i52.71913a81ZoJEkQ"
                class="selected"
              ></path>
              <path
                d="M823.466667 170.666667h102.4a34.133333 34.133333 0 0 1 34.133333 34.133333v614.4a34.133333 34.133333 0 0 1-34.133333 34.133333h-102.4a34.133333 34.133333 0 0 1-34.133334-34.133333V204.8a34.133333 34.133333 0 0 1 34.133334-34.133333zM567.466667 341.333333h102.4a34.133333 34.133333 0 0 1 34.133333 34.133334v443.733333a34.133333 34.133333 0 0 1-34.133333 34.133333h-102.4a34.133333 34.133333 0 0 1-34.133334-34.133333V375.466667a34.133333 34.133333 0 0 1 34.133334-34.133334z"
                fill="#b7f8b5"
                p-id="8469"
                data-spm-anchor-id="a313x.search_index.0.i49.71913a81ZoJEkQ"
                class="selected"
              ></path>
            </svg>
            <span>网络状态</span>
          </div>
        </el-tooltip>
      </li>
      <li class="status_time">
        <svg
          t="1696431141102"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6311"
          width="16"
          height="16"
        >
          <path
            d="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM671.199059 575.903242 480.263397 575.903242c-17.717453 0-32.166639-14.449185-32.166639-32.166639L448.096758 289.15572c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 222.930287 159.285066 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S688.916513 575.903242 671.199059 575.903242z"
            fill="#575B66"
            p-id="6312"
          ></path>
        </svg>
        <span>{{ time }}</span>
      </li>
      <li class="videoStatus">
        <el-dropdown>
          <span class="el-dropdown-link">
            宫格视图
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>右侧成员列表</el-dropdown-item>
              <el-dropdown-item>一屏三等分</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li class="changeGroup">
        <el-button type="info" @click="handelGroup">
          <el-icon size="20"><Grid /></el-icon>
        </el-button>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.flexDiv {
  display: flex;
  align-items: center;
}
.video_status {
  height: 5%;
  width: 100%;
  ul {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    li {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #ccc;
      padding-right: 5px;
      margin-left: 10px;
      &:last-child {
        border: none;
      }
      span {
        margin-left: 5px;
      }
    }
    .changeGroup {
      position: absolute;
      right: 10px;
      top: 45%;
      transform: translateY(-50%);
    }
  }
}
</style>
